<script lang="ts" setup name="techniquePtTechnique">
import {
  api,
  cloneOperation,
  getListByCondition,
  getListByConditionsWithPage,
  urls
} from '@/index';
import type { DialogModel, PtTechnique, PtTechniqueQueryCondition } from '@/index.d';
import { useRequest } from 'vue-request';
import DetailDialog from './DetailDialog.vue';
const title = '渗透检测工艺';
const queryCondition = reactive<PtTechniqueQueryCondition>({
  deleted: false,
  change: false,
  currentPage: 1,
  pageSize: 20
});

const resetQueryCondition = () => {
  queryCondition.currentPage = 1;
  queryCondition.pageSize = 20;
  queryCondition.deleted = false;
  delete queryCondition.projectId;
  delete queryCondition.fullName;
};

const {
  data: getMainTableListData,
  run: getMainTableListRun,
  loading: getMainTableListLoading
} = useRequest(() => getListByConditionsWithPage(urls.techniquePtTechnique, queryCondition));

const handleResetQuery = () => {
  resetQueryCondition();
  getMainTableListRun();
};

const detailDialogModel = reactive<DialogModel<PtTechnique>>({
  visible: false,
  title,
  type: 'view',
  id: 0,
  change: false
});

watch(
  () => detailDialogModel.visible,
  (value: boolean) => {
    if (!value && detailDialogModel.change) {
      getMainTableListRun();
      detailDialogModel.change = false;
    }
  }
);

const sourceProjectId = ref<number>();
const targetProjectId = ref<number>();

watch(
  () => sourceProjectId.value,
  async (value: number | undefined) => {
    const res = (await getListByCondition<PtTechnique>(
      urls.techniquePtTechnique,
      'projectId',
      value as number
    )) as Array<PtTechnique>;
    if (res.length === 0) {
      ElMessage.error('源项目下没有渗透检测工艺，请重新选择！');
      sourceProjectId.value = undefined;
    }
  }
);

watch(
  () => targetProjectId.value,
  async (value: number | undefined) => {
    const res = (await getListByCondition<PtTechnique>(
      urls.techniquePtTechnique,
      'projectId',
      value as number
    )) as Array<PtTechnique>;
    if (res?.length > 0) {
      ElMessage.warning(`目标项目下有${res.length}条渗透检测工艺，请谨慎操作！`);
      sourceProjectId.value = undefined;
    }
  }
);

const cloneProject = async (s: number, t: number) => {
  const res = await cloneOperation(s, t);
  res && getMainTableListRun();
};

const isCloneBtnDisabled = computed(() => {
  return (
    sourceProjectId.value &&
    targetProjectId.value &&
    sourceProjectId.value !== targetProjectId.value
  );
});
</script>
<template>
  <HqContainerTable
    :base-url="urls.techniquePtTechnique"
    :title="title"
    :loading="getMainTableListLoading"
    :total="getMainTableListData?.total"
    :table-data="getMainTableListData?.records"
    v-model:pageSize="queryCondition.pageSize"
    v-model:current-page="queryCondition.currentPage"
    @handle-query="getMainTableListRun"
    @handle-reset-query="handleResetQuery"
    @handle-reload="getMainTableListRun"
    v-model:detail-dialog-model="detailDialogModel"
    operate-column
  >
    <template #search>
      <hq-col kind="search">
        <el-select
          v-model="queryCondition.projectId"
          placeholder="请选择项目名称"
          clearable
          filterable
          @change="getMainTableListRun"
        >
          <HqProjectNameOptions />
        </el-select>
      </hq-col>
      <hq-col kind="search">
        <el-input
          v-model="queryCondition.fullName"
          placeholder="请输入技术名称"
          @keydown.enter="getMainTableListRun"
        />
      </hq-col>
    </template>

    <template #button>
      <el-select style="width: 400px" v-model="sourceProjectId" placeholder="请选择源项目">
        <HqProjectNameOptions />
      </el-select>
      <el-select style="width: 400px" v-model="targetProjectId" placeholder="请选择目标项目">
        <HqProjectNameOptions />
      </el-select>
      <el-popconfirm
        title="确认要克隆吗？克隆后目标项目的检测工艺将被覆盖。"
        @confirm="cloneProject(sourceProjectId!, targetProjectId!)"
        hide-icon
        :width="300"
      >
        <template #reference>
          <el-button type="primary" :disabled="!isCloneBtnDisabled"> 克隆{{ title }} </el-button>
        </template>
      </el-popconfirm>
    </template>

    <template #tableColumns>
      <HqTableColumn label="项目名称" prop="projectName" :min-width="300" />
      <HqTableColumn label="技术名称" prop="fullName" :min-width="200" />
      <HqTableColumn label="温度下限" prop="temperatureDown" :min-width="200" />
      <HqTableColumn label="温度上限" prop="temperatureUp" :min-width="200" />
      <HqTableColumn label="白光照度下限" prop="illuminanceForWhiteDown" :min-width="200" />
      <HqTableColumn label="预清洗干燥时间下限" prop="preCleanDryTimeDown" :min-width="200" />
      <HqTableColumn label="渗透时间下限" prop="penetrationTimeDown" :min-width="200" />
      <HqTableColumn label="后清洗干燥时间下限" prop="postCleanDryTimeDown" :min-width="200" />
      <HqTableColumn label="后清洗干燥时间上限" prop="postCleanDryTimeUp" :min-width="200" />
      <HqTableColumn label="显像时间下限" prop="developerTimeDown" :min-width="200" />
      <HqTableColumn label="显像时间上限" prop="developerTimeUp" :min-width="200" />
      <HqTableColumn label="渗透耗材品牌" prop="materialBrandName" :min-width="200" />
      <HqTableColumn label="渗透剂型号" prop="penetrateMaterialName" :min-width="200" />
      <HqTableColumn label="清洗剂型号" prop="cleanMaterialName" :min-width="200" />
      <HqTableColumn label="显像剂型号" prop="developMaterialName" :min-width="200" />
      <HqTableColumn label="试片型号" prop="sensitivityBlock" :min-width="200" />
    </template>
  </HqContainerTable>
  <DetailDialog v-model:dialog-model="detailDialogModel" v-if="detailDialogModel.visible" />
</template>
<style lang="scss" scoped></style>
